import { View, Image } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import env from '../../../store/env.config'
import '../index.scss'

interface AddrInterface {
  cityName: string
  countyName: string
  detailInfo: string
  nationalCode: string
  postalCode: string
  provinceName: string
  telNumber: string
  userName: string
}

const MyItem = ({ recode, setAddr, addr = {} as AddrInterface }) => {
  const [myRecode, setMyrecode] = useState({} as any)
  const [userInfo, setUserInfo] = useState({} as any)
  useEffect(() => {
    Taro.getStorage({
      key: 'userInfo',
      success: (userData) => {
        setUserInfo(userData['data'])
      },
    })
  }, [])

  useEffect(() => {
    getGoodsRecode()
  }, [userInfo, recode])

  const getGoodsRecode = () => {
    Taro.request({
      url: `${env.domain}/goods/list`,
      data: {
        page: 1,
        pageSize: 1,
        token: userInfo['auth'],
        id: recode.id,
      },
      success: (res) => {
        if (res.data['code'] === 200) {
          setMyrecode(res.data['data']['recode'][0])
          return
        }
      },
    })
  }
  const getUserAddr = () => {
    Taro.chooseAddress({
      success: function (res) {
        setAddr(res)
      },
    })
  }

  return (
    <View className='Item'>
      <View>
        <Image className='image' src={myRecode.cover} />
      </View>
      <View className='at-row price'>
        <View className='at-col at-col-2' style={{ color: 'red' }}>
          ¥{myRecode.price}
        </View>
        <View className='at-col at-col-6'>《{myRecode.name}》</View>
        <View className='at-col at-col-4'>
          <View className='text' style={{ textAlign: 'right' }}>
            库存{myRecode['inventory']}/{myRecode['total']}
          </View>
        </View>
      </View>
      <View className='price content'>
        <View className='wordWrap'>{myRecode.remark}</View>
      </View>
      <View className='price at-row'>
        <View className='at-col at-col-2'>已选</View>
        <View className='at-col at-col-10'>
          1件，不可以选服务
          <AtIcon
            className='link-icon'
            value='link'
            size='15'
            color='#000'
          ></AtIcon>
        </View>
      </View>
      <View className='price at-row'>
        <View className='at-col at-col-2'>送至</View>
        <View className='at-col at-col-10'>
          <View className='at-row'>
            <View className='at-col at-col-12' onClick={getUserAddr}>
              {addr.provinceName != undefined ? (
                addr.provinceName +
                addr.cityName +
                addr.countyName +
                addr.detailInfo
              ) : (
                <>
                  <AtIcon
                    value='lightning-bolt'
                    size='15'
                    color='#000'
                  ></AtIcon>
                  收获地址
                  <AtIcon
                    className='link-icon'
                    value='link'
                    size='15'
                    color='#000'
                  ></AtIcon>
                </>
              )}
            </View>
          </View>
          <View className='price content'>
            <View className='wordWrap'>
              现在完成下单，预计明日18:00前发货，三天时间送达
            </View>
          </View>
        </View>
      </View>
      <View className='price at-row'>
        <View className='at-col at-col-2'>运费</View>
        <View className='at-col at-col-10'>
          在线支付免运费（请以提交订单时为准）
        </View>
      </View>
    </View>
  )
}

export default MyItem
